<script setup>
import { reactive, toRefs } from 'vue';
import gsap from 'gsap';

const props = defineProps({
  from: {
    type: Number,
    default: 0,
  },
  to: {
    type: Number,
    default: 0,
  },
  duration: {
    type: Number,
    default: 1,
  },
});
const { from, to, duration } = toRefs(props);
let tweened = reactive({
  number: from.value,
});

gsap.to(tweened, { duration: duration.value, ease: 'power1.out', number: to.value.toFixed(0) });
</script>
<template>
  <div>
    {{ tweened.number.toFixed(0) }}
  </div>
</template>

<style scoped lang="scss"></style>
